<template>
    <view class="detail">
        <view v-if="loadState">
            <view class="title">{{this.detail.title}}</view>
            <view class="info">
                <view class="createTime">发布时间：{{this.detail.createTime}}</view>
                <view class="likeCount">
                    <text>热度：{{this.detail.likeCount}}</text>
                    <uni-fav :checked="this.isFavorites" class="favBtn" :circle="true" bg-color="#dd524d"
                        bg-color-checked="#8EB97E" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick()" />
                </view>
            </view>
            <view class="label">
                <view class="labelName">标签：</view>
                <view class="labelItem">
                    <uni-tag v-for="ele in this.detail.label" :text="ele" circle="true" inverted="true"
                        custom-style="border: 0.13rem solid #8EB97E; margin-right:0.2rem; padding-top:0.2rem;" />
                </view>
            </view>
            <view class="content">
                <mp-html :markdown="this.isMarkdown" :content="this.detail.content" />
            </view>
        </view>
        <view v-else>
            <uni-load-more status="loading"></uni-load-more>
        </view>
    </view>
</template>

<script>
    import {
        getUserInfo
    } from "@/utils/userUtils.js";
    let resId = "";
    let userId = "";
    export default {
        data() {
            return {
                detail: {},
                loadState: false,
                isMarkdown: true,
                isFavorites: false,
            };
        },
        onLoad(e) {
            resId = e.id;
            this.getUser(() => {
                this.checkIsFavorites();
            });
            this.getDetail();
        },
        methods: {
            //获取详情
            getDetail() {
                uniCloud.callFunction({
                    name: "resources_mapper",
                    data: {
                        optType: "getById",
                        param: {
                            resId
                        }
                    }
                }).then(res => {
                    this.detail = res.result.data[0];
                    this.loadState = true;
                }).catch(() => {
                    uni.showToast({
                        icon: "error",
                        title: "程序错误！"
                    })
                    setTimeout(() => {
                        uni.reLaunch({
                            url: "/pages/index/index"
                        })
                    }, 800)
                })
            },

            favClick() {
                if (userId == "") {
                    uni.showToast({
                        icon: "error",
                        title: "用户信息获取失败！"
                    });
                    return;
                }
                uniCloud.callFunction({
                    name: "user_favorites_mapper",
                    data: {
                        optType: "add",
                        param: {
                            userId: userId,
                            resId: resId
                        }
                    }
                }).then(res => {
                    uni.showToast({
                        icon: "success",
                        title: "收藏成功！"
                    });
                    this.addLikeCount();
                    this.isFavorites = true;

                }).catch(() => {
                    uni.showToast({
                        icon: "error",
                        title: "收藏失败！"
                    });
                })
            },

            addLikeCount() {
                uniCloud.callFunction({
                    name: "resources_mapper",
                    data: {
                        optType: "incCount",
                        param: {
                            resId: resId,
                            num: 5
                        }
                    }
                }).then(res => {
                    console.log(res);
                })
            },

            checkIsFavorites() {
                if (userId == "") {
                    uni.showToast({
                        icon: "error",
                        title: "用户信息获取失败！"
                    });
                    return;
                }
                uniCloud.callFunction({
                    name: "user_favorites_mapper",
                    data: {
                        optType: "isFav",
                        param: {
                            resId,
                            userId
                        }
                    }
                }).then(res => {
                    console.log(res);
                    if (res.result.total > 0) {
                        this.isFavorites = true;
                    }
                })
            },

            async getUser(callback) {
                try {
                    let user = await getUserInfo();
                    console.log(user);
                    userId = user.open_id;
                    callback();

                } catch (err) {
                    console.error(err);
                    uni.showToast({
                        icon: "error",
                        title: "获取用户信息失败！"
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .detail {
        padding: 1.2rem;

        .title {
            font-size: 1.8rem;
        }

        .info {
            display: flex;
            justify-content: space-between;
            margin-top: 0.6rem;

            .createTime {
                color: #888;
                font-size: 1.2rem;
            }

            .likeCount {
                display: flex;
                justify-content: space-between;

                text {
                    color: #888;
                    font-size: 1.2rem;
                }

                .favBtn {
                    margin: 0 1.5rem 0.2rem 0.4rem;
                }
            }
        }

        .label {
            white-space: nowrap;
            display: flex;
            align-items: center;
            margin-top: 0.6rem;

            .labelName {
                font-size: 1.2rem;
                color: #888;
                text-align: center;
            }

            .labelItem {
                display: flex;
                flex-wrap: wrap;
            }
        }

        .content {
            margin-top: 1rem;
        }
    }
</style>
